<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/AddressBook.css">
</head>
<body>
<div>
    <header>
        <p class="title">通讯录</p>
        <div class="icon">
            <img src="../image/search.svg">
            <img src="../image/add.svg">
        </div>
    </header>
    <div class="message">
        <img src="../AddressBookImage/newfrends.svg">
        <section>
            <p class="p1">新的朋友</p>
        </section>
    </div>
    <div class="message">
        <img src="../AddressBookImage/liaotian.svg">
        <section>
            <p class="p1">仅聊天的朋友</p>
        </section>
    </div>
    <div class="message">
        <img src="../AddressBookImage/qunliao.svg">
        <section>
            <p class="p1">群聊</p>
        </section>
    </div>
    <div class="message">
        <img src="../AddressBookImage/biaoqian.svg">
        <section>
            <p class="p1">标签</p>
        </section>
    </div>
    <div class="message">
        <img src="../AddressBookImage/gongzhonghao.svg">
        <section>
            <p class="p1">公众号</p>
        </section>
    </div>
    <div  class="navigation">
        <p id="a">A</p>
    </div>
    <div class="message" href="#c">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="b">B</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="c">C</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="d">D</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="e">E</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="f">F</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="g">G</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="h">H</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="i">I</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="j">J</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="k">K</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="l">L</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="m">M</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="n">N</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="o">O</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="p">P</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="q">Q</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="r">R</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="s">S</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="t">T</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="u">U</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="v">V</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="w">W</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="x">X</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="y">Y</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="z">Z</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <div  class="navigation">
        <p id="#">#</p>
    </div>
    <div class="message">
        <img src="../iconImage/4.jpg">
        <section>
            <p class="p1">华仔</p>
            <p class="p2">...</p>
        </section>
        <p class="p3">14.26</p>
    </div>
    <ul>
        <li>
            <div class="menu">
                <a href="#a">A</a>
                <a href="#b">B</a>
                <a href="#c">C</a>
                <a href="#d">D</a>
                <a href="#e">E</a>
                <a href="#f">F</a>
                <a href="#g">G</a>
                <a href="#h">H</a>
                <a href="#i">I</a>
                <a href="#j">J</a>
                <a href="#k">K</a>
                <a href="#l">L</a>
                <a href="#m">M</a>
                <a href="#n">N</a>
                <a href="#o">O</a>
                <a href="#p">P</a>
                <a href="#q">Q</a>
                <a href="#r">R</a>
                <a href="#s">S</a>
                <a href="#t">T</a>
                <a href="#u">U</a>
                <a href="#v">V</a>
                <a href="#w">W</a>
                <a href="#x">X</a>
                <a href="#y">Y</a>
                <a href="#z">Z</a>
                <a href="##">#</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>